<template>
  <div>
    <h2>组合API-数据的响应式</h2>
    <hr>
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { reactive, toRef } from 'vue'

export default {
  name: 'App',
  setup () {
    // 数据的响应式:A的变化导致B的变化（数据的变化导致模板自动变化）
    // setup函数中返回的普通数据不具有响应式能力
    // reactive可以把整个对象变成响应式数据
    const obj = reactive({
      msg: 'hello',
      info: 'hi'
    })
    // toRef可以把响应式对象中的数据解析单个属性并保持响应式能力
    const msg = toRef(obj, 'msg')
    const info = toRef(obj, 'info')

    // 如果响应式对象中的数据被重新赋值给别的变量，那么就失去了响应式能力
    // const msg = obj.msg
    // const info = obj.info
    const handleClick = () => {
      obj.msg = 'nihao'
      obj.info = 'abc'
      console.log(obj)
    }
    return {
      msg,
      info,
      handleClick
    }
  }
}
</script>
